<template>
<div>
	<el-card>
		<p style="color: red;">试卷总分数：{{form.zongfen}}</p>
	</el-card>
	<el-scrollbar
	      wrapClass="scrollbar-wrap"
	      :style="{height: scrollHeight}"
	      ref="scrollbarContainer"> 
	<el-card style="height: 100%;">
		<el-scrollbar wrapClass="scrollbar-wrap" :style="{height: scrollHeight}" ref="scrollbarContainer">
			<div id="sss">
				<el-form >
					<el-form-item>
						<div class="block">
							<span class="demonstration">选择考试时间段：</span>
							<el-date-picker v-model="date" type="datetimerange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</div>
					</el-form-item>
					<el-form-item>试卷：
						<el-input v-model="form.name" style="width: 400px; " placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item>科目：
						<el-select placeholder="请选择课程" v-model="form.course_id">
							<el-option v-for="course in courses" :key="course.id" :value="course.id"
								:label="course.name"></el-option>
						</el-select>
					</el-form-item>


					<el-form-item>单选题个数：
						<el-input-number v-model="form.danXuanNum" controls-position="right"  :min="0"
							></el-input-number>
					</el-form-item>
					<el-form-item>单选题每题分数:
						<el-input-number v-model="form.danXuanFen" controls-position="right"   :min="0"
							:max="10"></el-input-number>

					</el-form-item>
					<el-form-item>多选题个数：
						<el-input-number v-model="form.duoXuanNum" controls-position="right"    :min="0"
							></el-input-number>
					</el-form-item>
					<el-form-item>多选题每题分数：
						<el-input-number v-model="form.duoXuanFen" controls-position="right"  :min="0"
							:max="10"></el-input-number>
					</el-form-item>
					<el-form-item>判断选题个数：

						<el-input-number v-model="form.panDuanNum" controls-position="right"  :min="0"
							></el-input-number>
					</el-form-item>
					<el-form-item>判断题每题分数：
						<el-input-number v-model="form.panDuanFen" controls-position="right"  :min="0"
							:max="10"></el-input-number>
					</el-form-item>
					<el-form-item>及格线：
						<el-input v-model="form.jige" style="width: 200px;"></el-input>
					</el-form-item>
					<template>
						<div class="aaaaa">
							<el-button :plain="true" @click="save()">保存</el-button>
							<el-button @click="out()">返回</el-button>
						</div>
					</template>
				</el-form>
			</div>
		</el-scrollbar>
	</el-card>
	</el-scrollbar>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.scrollHeight = window.innerHeight * 0.85 + 'px';
		},
		data() {
			return {
				
				date:'',	
				scrollHeight: '0px',
				form: {
					jige:0,
					zongfen:0,
					danxuan:0,
					duoxuam:0,
					panduan:0,
					danXuanNum: 0,
					duoXuanNum: 0,
					panDuanNum: 0,
					danXuanFen: 0,
					duoXuanFen: 0,
					panDuanFen: 0,
					zhishiId: '',
					name: '',
					create_time: '',
					update_time: '',
					course_id: '',
				},
				courses: [],
				/* history:[] */
			}
		},
		methods: {
			handleChange(value) {
				console.log(value);
			},
			save() {
				this.$ajax.post('Shijuan/save', this.form).then(res => {
					console.log(res);
					this.$message({
						message: '新增成功',
						type: 'success'
					});
					this.$router.push({
						path: '/teacher/sjsz'
					})
				})
			},
			out() {
				this.$router.push('/teacher/sjsz')
			},
			courseList() {
				this.$ajax.post('course/courselist', {}).then(res => {
					var result = res.data.data;
					this.courses = result;

				})
			},

		},
		created() {
			this.courseList()
		},
		watch:{
			
				
			'form.danXuanNum'(a,b){
				this.form.danXuanNum=a;
				this.form.danxuan=this.form.danXuanNum*this.form.danXuanFen;
				this.form.zongfen=this.form.danxuan+this.form.duoxuam+this.form.panduan;
			},
			'form.danXuanFen'(a,b){
				this.form.danXuanFen=a;
				this.form.danxuan=this.form.danXuanNum*this.form.danXuanFen;
				this.form.zongfen=this.form.danxuan+this.form.duoxuam+this.form.panduan;
			},
			'form.duoXuanFen'(a,b){
				this.form.duoXuanFen=a;
				this.form.duoxuam=this.form.duoXuanNum*this.form.duoXuanFen;
				this.form.zongfen=this.form.danxuan+this.form.duoxuam+this.form.panduan;
			},
			'form.duoXuanNum'(a,b){
				this.form.duoXuanNum=a;
				this.form.duoxuam=this.form.duoXuanNum*this.form.duoXuanFen;
				this.form.zongfen=this.form.danxuan+this.form.duoxuam+this.form.panduan;
			},
			'form.panDuanFen'(a,b){
				this.form.panDuanFen=a;
				this.form.panduan=this.form.panDuanNum*this.form.panDuanFen;
				this.form.zongfen=this.form.danxuan+this.form.duoxuam+this.form.panduan;
			},
			'form.panDuanNum'(a,b){
				this.form.panDuanNum=a;
				this.form.panduan=this.form.panDuanNum*this.form.panDuanFen;
				this.form.zongfen=this.form.danxuan+this.form.duoxuam+this.form.panduan;
			},
			'form.jige'(a,b){
				if(a>this.form.zongfen){
					this.$message.error("及格分不能大于总分！")
					this.form.jige=b
					return
				}
			},
			date(a,b){
				var year=a[0].getYear()+1900;
				var month=a[0].getMonth();
				var day=a[0].getDay();
				var hour=a[0].getHours();
				var min=a[0].getMinutes();
				var miao=a[0].getSeconds();
				
				var year2=a[1].getYear()+1900;
				var month2=a[1].getMonth();
				var day2=a[1].getDay();
				var hour2=a[1].getHours();
				var min2=a[1].getMinutes();
				var miao2=a[1].getSeconds();
				
				this.form.update_time=year+"-"+month+"-"+day+" "+hour+":"+min+":"+miao
				this.form.create_time=year2+"-"+month2+"-"+day2+" "+hour2+":"+min2+":"+miao2
			}
		}


	}
</script>

<style>
	.aaaaa {
		padding: 50px;
	}

	#sss {}
</style>
